<template>
  <div>
    <div style="text-align: right">
      <a-popover>
        <template slot="content">
          <div style="overflow: hidden; min-width: 200px">
            <div class="icon-left">
              <span>{{ $t('deviceDetail.role') }}</span>
              <div
                class="iconBox"
                v-for="item in copperState"
                :key="item.index"
              >
                <div class="icon-content">
                  <icon-font
                    :type="`ic-port-${item.port ? item.port : 'electric'}`"
                    v-if="item.type == 'status' || item.type == 'over'"
                    :class="['icon-port']"
                  ></icon-font>
                  <icon-font
                    :type="'ic-port-' + item.name"
                    :class="[getIconStatus(item)]"
                  ></icon-font>
                </div>
                <span>{{ item.text }}</span>
              </div>
            </div>
            <div class="icon-right">
              <span>{{ $t('radiosPlan.rrmStatus') }}</span>
              <div class="iconBox" v-for="item in copperType" :key="item.text">
                <icon-font
                  type="ic-port-electric"
                  :class="['port-icon']"
                  :style="{
                    fontSize: '18px',
                    color:
                      item.color && item.color != '' ? item.color : '#595959',
                  }"
                />
                <span style="white-space: nowrap">{{ item.text }}</span>
              </div>
            </div>
          </div>
        </template>
        <a>{{ $t('deviceDetail.interfaceExplain') }}</a>
      </a-popover>
    </div>
  </div>
</template>

<script>
import { i18nRender } from '@/locales';
const defaultCopperType = [
  {
    text: '1G/2.5G/5G/10G/20G/25G/40G/100G',
    color: '#13bb72',
  },
  {
    text: '10M/100M',
    color: '#f4c24e',
  },
  {
    text: i18nRender('deviceDetail.disconnect'),
    color: '',
  },
  {
    text: i18nRender('radiosPlan.close'),
    color: '#d9d9d9',
  },
  {
    text: i18nRender('deviceDetail.abnormal'),
    color: '#eb455a',
  },
];
const defaultCopperState = [
  {
    text: i18nRender('deviceDetail.poe'),
    name: 'POE',
    type: 'status',
  },
  {
    text: i18nRender('deviceDetail.powererror'),
    name: 'POEabnormal',
    type: 'status',
  },
  {
    text: i18nRender('deviceDetail.blocking'),
    name: 'block',
    type: 'status',
  },
  {
    text: i18nRender('deviceDetail.looping'),
    name: 'ring',
    type: 'status',
  },
  {
    text: i18nRender('deviceDetail.hpoe'),
    name: 'HPOE',
    type: 'status',
  },
  {
    text: i18nRender('deviceDetail.spectral'),
    name: 'FS',
    type: 'status',
    port: 'light',
  },
  {
    text: i18nRender('deviceDetail.Upperjoint'),
    name: 'union',
    type: 'over',
  },
  {
    text: i18nRender('deviceDetail.copper'),
    name: 'electric',
    type: 'none',
  },
  {
    text: i18nRender('deviceDetail.sfp'),
    name: 'light',
    type: 'none',
  },
  {
    text: i18nRender('deviceDetail.scSpectral'),
    name: 'SC',
    type: 'none',
  },
];
export default {
  name: 'portIcon',
  props: {
    copperType: {
      type: Array,
      default: () => {
        return defaultCopperType;
      },
    },
    copperState: {
      type: Array,
      default: () => {
        return defaultCopperState;
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     * @description: 获取图例图标
     * @param {*} item
     * @return {*}
     */
    getIconStatus(item) {
      if (['status', 'over'].indexOf(item.type) > -1) {
        return 'icon-' + item.type;
      } else {
        return 'icon-port';
      }
    },
  },
};
</script>

<style scoped lang="less">
.port-icon {
  color: @portBlack;
  // &.green {
  //   color: @portGreen;
  // }
  // &.yellow {
  //   color: @portYellow;
  // }
  // &.red {
  //   color: @portRed;
  // }
  // &.disbaled {
  //   color: @portDisabled;
  // }
}

.iconBox {
  text-align: center;
}

.over-icon {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}

.portStatus {
  min-width: 200px;
  font-size: 12px;
}
.portStatus p {
  display: flex;
  justify-content: space-between;
}
.portStatus-vlan {
  display: block;
}

.icon-content {
  position: relative;
  .icon-port {
    font-size: 18px;
    color: #d9d9d9;
  }
  .icon-status,
  .icon-over {
    position: absolute;
    color: #595959;
  }
  .icon-over {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
  .icon-status {
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border: 1px solid #595959;
    background-color: #fff;
    line-height: 16px;
    text-align: center;
    bottom: 0px;
    right: 33px;
    transform: scale(0.75);
  }
}
.icon-left,
.icon-right {
  float: left;
  width: 100px;
}
.icon-right {
  text-align: left;
  .iconBox {
    i {
      display: block;
    }
  }
}
</style>
